<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%- include("./component/header.html"); %>
    <style>
        .main {
            width: 80vw !important;
            max-width: initial !important;
        }

        #book-table {
            width: 100%;
            /* border: 1px solid black; */
            margin-top: 30px;
            line-height: 2.3em;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        tr a {
            cursor: pointer;
            /* cursor: alias; */
        }

        /* 在分类下隐藏书籍的分类 */
        tr>*:nth-child(2) {
            display: none;
        }
    </style>
</head>
<body>
    <%- include("./component/navbar.html"); %>
    <main class="main">
        <!-- <h1><%= headText %></h1> -->
        <div id="container">
            <!-- <a href="./book">书本详情页</a> -->
        </div>
        <hr style="margin: 30px 0;">
        <h3>该分类下的书籍</h3>
        <div id="container-book">
            <table id="book-table" style="width: 100%;"></table>
        </div>
    </main>
    <%- include("./component/footer.html"); %>

    <!-- 获取参数 -->
    <script src="/assets/javascripts/getParams.js"></script>
    <!-- 渲染表格 -->
    <script src="/assets/javascripts/renderTable.js"></script>
    <!-- 搜索书籍 -->
    <script src="/assets/javascripts/searchBooks.js"></script>
    <script>
        var requestParams = getParams();
        var searchbox = document.getElementById("searchInput");
        var categoryId = requestParams["id"] ?? "";
        console.log("categoryId", categoryId);
        if (categoryId === "") {
            location.href = "/search";
        }
        search({
            tableElementId: "book-table",
            searchText: null,
            categoryId: categoryId
        });
    </script>
    <script>
        getRequest("/category/get", { id: categoryId })
            .then(function (response) {
                var axiosData = response.data;
                var status = axiosData.status;
                var data = axiosData.data;
                if (status === "success") {
                    console.log(data)
                    if (data.description == "")
                        data.description = "暂无描述";

                    var topCategory = data.parentId !== 0 ? `<a href="/category?id=${data.parentId}">上级分类</a>` : "";
                    document.getElementById("container").innerHTML = `
                    <div class="grid">
                        <div class="grid-item">
                            <h1>${data.name}</h1>
                            <p>分类ID: ${data.id}</p>
                            <p>${topCategory}</p>
                        </div>
                        <div class="grid-item">
                            <h2>简介</h2>
                            <p>${data.description}</p>
                        </div>
                    </div>`;
                } else {
                    swal(`出错啦！${data.errMsg} (错误码: ${data.errCode})`);
                }
            }).catch(function (error) {
                console.log(error);
                swal("无法连接到服务器，请检查网络连接！");
            }).finally(function () {
                // 渲染后重新获取一次字体
                if (typeof (fontmin) === "function") {
                    fontmin(getPageText());
                }
            });
    </script>
</body>
</html>